<template>
  <div id="container">
    <span>资讯标题：</span
    ><el-input
      v-model="input"
      placeholder="资讯标题,最多50个字符"
      style="margin-top: 1%; width: 50%"
    ></el-input>
    <Article
      @submitArticle="setArticle"
      ref="articleClear"
      style="margin-top: 1%"
    />
    <el-button type="success" style="margin-top: 1%" @click="release"
      >点击发布</el-button
    >
  </div>
</template>
<script>
import Article from "@/components/Article";
import { informationSave } from "@/api/userApi";
export default {
  components: {
    Article,
  },
  data() {
    return {
      context: null,
      input: null,
    };
  },
  methods: {
    release() {
      const data = {
        context: this.context,
        title: this.input,
      };
      if (
        data.title == null ||
        data.title.replace(/^\s+|\s+$/g, "").length == 0
      ) {
        this.$message.warning("必须输入资讯标题");
      } else if (data.title.replace(/^\s+|\s+$/g, "").length > 50) {
        this.$message.warning("资讯标题长度必须小于50");
      } else {
        data.title = data.title.replace(/^\s+|\s+$/g, "")
        informationSave(data).then((res) => {
          if (res.code == 0) {
            this.$refs.articleClear.clearHtml();
            this.input = null
            this.$message.success("发布成功");
          } else {
            this.$message.error(res.message);
          }
        });
      }
    },
    setArticle(html) {
      this.context = html;
    },
  },
};
</script>
<style scoped>
#container {
  margin-left: 1%;
  width: 90%;
}
</style>